﻿window.addEventListener("click", LgSelectOptionSwitch)
function LgSelectOptionSwitch(e) {
    var path = e.path || e.composedPath()
    var select = path.filter(p => p.className == "lg-form-select")[0] || null;
    if (select == null) {
        $(".lg-select-position").hide();
        // console.log("符合点击空白处关闭条件！")
    } else {
        if (path.filter(p => p.className == "lg-select").length > 0) {
            $(".lg-select-position").hide();
            $(select).find(".lg-select-position").show();
            //console.log("符合打开条件！")
        } else if (e.target.className.indexOf("option") > -1) {
            $(select).find(".lg-select-position").hide();
        }
    }
}
var diyForm = {
    types: {
        SingleText: function (d = {}) {
            this.Title = d.Title || "单行文本";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg'+lg.GetSN(6,10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.Range = d.Range || [0,0];
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey||"精确匹配"
        },
        Textarea: function (d = {}) {
            this.Title = d.Title || "多行文本";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender : true;
            this.Range = d.Range || [0, 0];
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配"
        },
        Address: function (d = {}) {
            this.Title = d.Title || "地址";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Level = d.Level || 4;
            this.RequiredLevel = d.RequiredLevel || 4;
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配"
        },
        Email: function (d = {}) {
            this.Title = d.Title || "邮件";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配"
        },
        Date: function (d = {}) {
            this.Title = d.Title || "日期";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.DateFormat = d.DateFormat || "yyyy-MM-dd";
            this.Range = d.Range || ["",""];
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配"
        },
        DateRange: function (d = {}) {
            this.Title = d.Title || "日期起止";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.DateFormat = d.DateFormat || "";
            this.Range = d.Range || ["",""];
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配"
        },
        IdNumber: function (d = {}) {
            this.Title = d.Title || "身份证";
            this.IdType =d.IdType|| "身份证";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.Group = d.Group || "";
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配"
        },
        Link: function (d = {}) {
            this.Title = d.Title || "链接";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配"
        },
        Number: function (d = {}) {
            this.Title = d.Title || "数字";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.AllowDecimals = d.AllowDecimals || false;
            this.Range = d.Range || [0,0];
            this.CurrencyFormat = d.CurrencyFormat || "";
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配"
        },
        Phone: function (d = {}) {
            this.Title = d.Title || "手机";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.SupportTelephone = d.SupportTelephone || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配"
        },
        Radio: function (d = {}) {
            this.Title = d.Title || "单项选择";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配";
            this.Options= d.Options || [
                {
                    Text: "选项1",
                    Id:lg.GetSN(6, 10),
                    ControlItems: [],
                    Icon: "",
                    NeedOtherValue: false
                },
                {
                    Text: "选项2",
                    Id: lg.GetSN(6, 10),
                    ControlItems: [],
                    Icon: "",
                    NeedOtherValue: false
                }
            ];
            this.Display = d.Display || "inline";
            this.IconOptions = d.IconOptions || false;
        },
        Checkbox: function (d = {}) {
            this.Title = d.Title || "多项选择";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || [];
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配";
            this.Options = d.Options || [
                {
                    Text: "选项1",
                    Id: lg.GetSN(6, 10),
                    ControlItems: [],
                    Icon: "",
                    NeedOtherValue: false
                },
                {
                    Text: "选项2",
                    Id: lg.GetSN(6, 10),
                    ControlItems: [],
                    Icon: "",
                    NeedOtherValue: false
                }
            ];
            this.Display = d.Display || "inline";
            this.IconOptions = d.IconOptions || false;
        },
        CheckBlock: function (d = {}) {
            this.Title = d.Title || "单选块";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender : true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配";
            this.Options = d.Options || [
                {
                    Text: "选项1",
                    Id: lg.GetSN(6, 10),
                    ControlItems: [],
                    Icon: "",
                    NeedOtherValue: false
                },
                {
                    Text: "选项2",
                    Id: lg.GetSN(6, 10),
                    ControlItems: [],
                    Icon: "",
                    NeedOtherValue: false
                }
            ];
            this.Display = d.Display || "inline";
        },
        Select: function (d = {}) {
            this.Title = d.Title || "下拉单项选择";
            this.EnTitle = d.EnTitle || "";
            this.Group = d.Group || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配";
            this.Options = d.Options || [
                {
                    Text: "选项1",
                    Id: lg.GetSN(6, 10),
                    ControlItems: [],
                    Icon: "",
                    NeedOtherValue: false
                },
                {
                    Text: "选项2",
                    Id: lg.GetSN(16, 8),
                    ControlItems: [],
                    Icon: "",
                    NeedOtherValue: false
                }
            ];
            this.Display = d.Display || "inline";
            this.IconOptions = d.IconOptions || false;
        },
        MultipleSelect: function (d = {}) {
            this.Title = d.Title || "下拉多项选择";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || [];
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配";
            this.Options = d.Options || [
                {
                    Text: "选项1",
                    Id:lg.GetSN(6, 10),
                    ControlItems: [],
                    Icon: "",
                    NeedOtherValue: false
                },
                {
                    Text: "选项2",
                    Id: lg.GetSN(6, 10),
                    ControlItems: [],
                    Icon: "",
                    NeedOtherValue: false
                }
            ];
            this.Display = d.Display || "inline";
            this.IconOptions = d.IconOptions || false;
        },
        Files: function (d = {}) {
            this.Title = d.Title || "附件上传";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || [];
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.Api = d.Api || "/api/user/apply/upfile";
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配";
            this.MaxSize = d.MaxSize || 1;
            this.FileTypes = d.FileTypes || ['jpg'];
            this.FileCount = d.FileCount || 1;
        },
        Accept: function (d = {}) {
            this.Title = d.Title || "开关";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender : true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配"
        },
        Switch: function (d = {}) {
            this.Title = d.Title || "文本选填";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.ExportName = d.ExportName || "";
            this.Width = d.Width || "100%";
            this.Required = d.Required || false;
            this.IsRender = d.IsRender != undefined ? d.IsRender:true;
            this.IsShow = d.IsShow || false;
            this.IsExport = d.IsExport || false;
            this.IsWhere = d.IsWhere || false;
            this.WhereKey = d.WhereKey || "精确匹配";
            this.Options = d.Options || [
                {
                    "Text": "是",
                    "Value": "1",
                    "ControlItems": [],
                    "Icon": "",
                    "NeedOtherValue": false
                },
                {
                    "Text": "否",
                    "Value": "0",
                    "ControlItems": [],
                    "Icon": "",
                    "NeedOtherValue": false
                }
            ];
            this.OtherTitle = d.OtherTitle || "";
            this.OtherTips = d.OtherTips || "";
            this.OtherName = d.OtherName || "";
            this.OtherValue = d.OtherValue || "";
            this.OtherRows = d.OtherRows || 4;
            this.OtherTextRange = d.OtherTextRange||["0","400"]
        },
        SmsCode: function (d = {}) {
            this.Title = d.Title || "短信验证码";
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.Value = d.Value || "";
            this.Api = d.Api || "";
            this.Receiver = d.Receiver || "Phone";
            this.Width = d.Width || "100%";
            this.Required = true;
            this.IsRender = true;
        },
        Group: function (d = {}) {
            this.Title = d.Title || "分组标题";
            this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
            this.EnTitle = d.EnTitle || "";
            this.Tips = d.Tips || "";
            this.IsRender = true;
        },
        Info: function (d = {}) {
            this.Tips = d.Tips || "描述字段";
            this.IsRender = true;
        },
    },
    icons: {
        "SingleText": "fa fa-font",
        "Textarea": "fa fa-align-justify",
        "Number": "fa fa-sort-numeric-asc",
        "Link": "fa fa-link",
        "Date": "fa fa-calendar",
        "DateRange": "fa fa-clock-o",
        "Phone": "fa fa-phone",
        "Email": "fa fa-envelope-o",
        "Radio": "fa fa-check-circle-o",
        "Checkbox": "fa fa-check-square-o",
        "Select": "fa fa-caret-square-o-down",
        "Address": "fa fa-map-marker",
        "IdNumber":"fa fa-id-card-o",
        "Image": "fa fa-picture-o",
        "Files": "fa fa-cloud-upload",
        "Group": "fa fa-th-large",
        "SmsCode": "fa fa-code",
        "Info": "fa fa-align-left",
        "MultipleSelect":"fa fa-caret-square-o-down"
    },
    components: {
        forms: [
            {
                "Key": "SingleText",
                "Name": "lg-form-singletext",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    template: `
					       <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						      <div class="lg-form-title">
                                   <i v-if="data.Required">*</i>
							       <span class="cn">{{data.Title}}</span>
                                   <span class="en">{{data.EnTitle}}</span>
						      </div>
						      <div class="lg-form-tips">{{data.Tips}}</div>
						      <div class="lg-form-control">
						           <input type="text" class="lg-input lg-input-text" :value="value" @input="$emit('update:value', $event.target.value)" v-on:blur="$emit('done',data)">
						           <span class="fa fa-close" v-if="data.error"></span>
						      </div>
						      <div class="lg-ver">
						  	      <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						      </div>
					       </div>`
                }
            },//SingleText
            {
                "Key": "IdNumber",
                "Name": "lg-form-idnumber",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    template: `
					       <div :class="['lg-form-item','lg-form-fa-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						      <div class="lg-form-title">
							       <i v-if="data.Required">*</i>
							       <span class="cn">{{data.Title}}</span>
                                   <span class="en">{{data.EnTitle}}</span>
						      </div>
						      <div class="lg-form-tips">{{data.Tips}}</div>
						      <div class="lg-form-control">
                                   <span class="fa fa-id-card-o"></span>
						           <input type="text" class="lg-input lg-input-text"  :value="value" @input="$emit('update:value', $event.target.value)" v-on:blur="$emit('done',data)">
						           <span class="fa fa-close" v-if="data.error"></span>
						      </div>
						      <div class="lg-ver">
						  	      <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						      </div>
					       </div>`
                }
            },//IdNumber
            {
                "Key": "Address",
                "Name": "lg-form-address",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    data() {
                        return {
                            address: [],
                            spliter: " > ",
                            city: [
                                { act: true, data: [] },
                                { act: false, data: [] },
                                { act: false, data: [] }
                            ]
                        }
                    },
                    watch: {
                        address: {
                            handler: function (newVal, oldVal) {
                                var value = this.address.filter(p => p).join(this.spliter);
                                this.$emit('update:value', value)
                            },
                            deep: true
                        }
                    },
                    computed: {
                        area: function () {
                            var arr = [];
                            for (let i = 0; i < 3; i++) {
                                if (this.address[i]) {
                                    arr.push(this.address[i])
                                }
                            }
                            return arr.join(this.spliter)
                        }
                    },
                    mounted: function () {
                        var level = this.data.Level
                        var val = this.value;
                        var arr = [];
                        if (val) {
                            arr = val.split(this.spliter)
                        }
                        for (let i = 0; i < level; i++) {
                            if (arr[i]) {
                                this.address.push(arr[i]);
                            } else {
                                this.address.push("");
                            }
                        }
                        this.city[0].data = this.getCity();
                    },
                    methods: {
                        getCity: function (psn) {
                            if (psn) {
                                return cnCity.filter(p => p.PSN == psn)
                            } else {
                                return cnCity.filter(p => p.Depth == 1)
                            }
                        },
                        onSelect: function (index, city) {
                            var level = this.data.Level > 3 ? 3 : this.data.Level;
                            var isLast = index == level - 1;
                            //将当前选中值赋给address用于data.Value取值
                            this.address[index] = city.Description;
                            this.city[index].act = true;
                            for (let i = 0; i < level; i++) {
                                //将大于当前索引的地下赋空值，逻辑上当点击当前分类的时候，将下一级取消赋值
                                if (i > index) {
                                    this.address[i] = "";
                                    this.city[i].data = [];
                                }
                                if (i != index) {
                                    this.city[i].act = false;
                                }
                            }
                            if (!isLast) {
                                this.city[index + 1].data = this.getCity(city.SN)
                            }
                        },
                        cancel: function () {
                            for (let i in this.address) {
                                this.address[i] = "";
                            }
                            this.$refs.dressBox.style.display = "none";
                            this.city[1].data = [];
                            this.city[2].data = [];
                        },
                        ok: function () {
                            this.$refs.dressBox.style.display = "none";
                        }
                    },
                    template: `<div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
                            <div class="lg-form-title">
                                   <i v-if="data.Required">*</i>
							       <span class="cn">{{data.Title}}</span>
                                   <span class="en">{{data.EnTitle}}</span>
                            </div>
                            <div class="lg-form-tips">{{data.Tips}}</div>
                            <div class="lg-form-control">
                                <div class="lg-form-select">
                                    <div class="lg-select">
                                        <input type="text" readonly class="lg-input lg-input-text" :value="area" />
                                        <label class="fa fa-angle-down" for="dress"></label>
                                    </div>
                                    <div class="lg-dress" v-if="data.Level==4">
                                        <textarea rows="3" class="lg-textarea" placeholder="详细地址"  v-model="address[3]"></textarea>
                                    </div>
                                    <div class="lg-select-position" ref="dressBox">
                                    <div class="dressBox">
                                        <div class="dress-btn">
                                           <span v-on:click="cancel()">取消</span><span v-on:click="ok()">确认</span>
                                        </div>
                                        <div class="dress-list">
                                            <div v-for="(item,index) in city" :class="['dress-depth',{'act':item.act}]" :key="'city'+index">
                                                <ul>
                                                    <li v-for="c in item.data" v-on:click="onSelect(index,c)" :class="{'selected':c.Description==address[index]}">
                                                        <span class="txt">{{c.Description}}</span><span class="fa fa-angle-right"></span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <span class="fa fa-close" v-if="data.error"></span>
                            </div>
                            <div class="lg-ver" v-if="data.error">
                                <p class="lg-ver-text">{{data.errMsg}}</p>
                            </div>
                        </div>`
                }
            },//Address
            {
                "Key": "Textarea",
                "Name": "lg-form-textarea",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    template: `
					   <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						  <div class="lg-form-title">
							       <i v-if="data.Required">*</i>
							       <span class="cn">{{data.Title}}</span>
                                   <span class="en">{{data.EnTitle}}</span>
							</div>
						    <div class="lg-form-tips">{{data.Tips}}</div>
						    <div class="lg-form-control" v-if="renderType==0">
							     <textarea rows="4" class="lg-textarea" :value="value" @input="$emit('update:value', $event.target.value)"></textarea>
						         <span class="fa fa-close" v-if="data.error"></span>
						    </div>
                            <div class="lg-form-showText" v-if="renderType==1">
                               <pre>{{value}}</pre>
                            </div>
						  <div class="lg-ver">
						  	  <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						  </div>
						</div>`
                }
            },//Textarea
            {
                "Key": "Link",
                "Name": "lg-form-link",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    template: `
					   <div :class="['lg-form-item','lg-form-fa-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						    <div class="lg-form-title">
							   <i v-if="data.Required">*</i>
							   <span class="cn">{{data.Title}}</span>
                               <span class="en">{{data.EnTitle}}</span>
							</div>
							<div class="lg-form-tips">{{data.Tips}}</div>
							<div class="lg-form-control">
							     <span class="fa fa-link"></span>
							     <input class="lg-input lg-input-text"  :value="value" @input="$emit('update:value', $event.target.value)">
							     <span class="fa fa-close" v-if="data.error"></span>
 							</div>
						    <div class="lg-ver">
						  	  <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						    </div>
						</div>`
                }
            },//Link
            {
                "Key": "Number",
                "Name": "lg-form-number",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Number],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    template: `
					   <div :class="['lg-form-item','lg-form-fa-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						    <div class="lg-form-title">
							    <i v-if="data.Required">*</i>
							    <span class="cn">{{data.Title}}</span>
                                <span class="en">{{data.EnTitle}}</span>
							</div>
							<div class="lg-form-tips">{{data.Tips}}</div>
							<div class="lg-form-control">
							     <span class="fa fa-sort-numeric-asc"></span>
							     <input class="lg-input lg-input-text" type="number"  :value="value" @input="$emit('update:value', $event.target.value)">
							     <span class="fa fa-close" v-if="data.error"></span>
 							</div>
						    <div class="lg-ver">
						  	  <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						    </div>
						</div>`
                }
            },//number
            {
                "Key": "NumberRange",
                "Name": "lg-form-numberrange",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Array],
                            default: [0, 0]
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    methods: {
                        setValue: function (index, value) {
                            var arr = this.value;
                            arr[index] = value;
                            this.$emit("update:value", arr);
                        }
                    },
                    template: `
					   <div :class="['lg-form-item','lg-form-fa-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						    <div class="lg-form-title">
							    <i v-if="data.Required">*</i>
							    <span class="cn">{{data.Title}}</span>
                                <span class="en">{{data.EnTitle}}</span>
							</div>
							<div class="lg-form-tips">{{data.Tips}}</div>
							<div class="lg-form-control">
							     <div class="relation lg-form-inputs">
                                    <input maxlength="400" class="lg-input lg-input-text lg-input-small" :value="value[0]" v-on:change="setValue(0,$event.target.value)">
                                    <span class="break">~</span>
                                    <input maxlength="400" class="lg-input lg-input-text lg-input-small" :value="value[1]" v-on:change="setValue(1,$event.target.value)">
                                </div>
 							</div>
						    <div class="lg-ver">
						  	  <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						    </div>
						</div>`
                }
            },//numberRange
            {
                "Key": "Date",
                "Name": "lg-form-date",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object, Number],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        format: {
                            type: String,
                            default:"date"
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    mounted: function () {
                        var that = this;
                        laydate.render({
                            elem: '#' + this.data.Name
                            , type: this.format
                            , done: (value, date, endDate) => {
                                this.$emit("update:value", value)
                                this.$emit("done", this.data)
                            }
                        });
                    },
                    template: `
					   <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						    <div class="lg-form-title">
							   <i v-if="data.Required">*</i>
							   <span class="cn">{{data.Title}}</span>
                               <span class="en">{{data.EnTitle}}</span>
							</div>
							<div class="lg-form-tips">{{data.Tips}}</div>
							<div class="lg-form-control">
							     <input type="text" class="lg-input lg-input-text" :id="data.Name" :value="value" readonly>
							     <span class="fa fa-close" v-if="data.error"></span>
							</div>
						    <div class="lg-ver">
						  	  <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						    </div>
						</div>`
                }
            },//Date
            {
                "Key": "DateRange",
                "Name": "lg-form-daterange",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        format: {
                            type: String,
                            default: "date"
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    data() {
                        return {
                            start: "",
                            end: ""
                        }
                    },
                    mounted() {
                        this.FormatData();
                        this.RenderDate();
                    },
                    methods: {
                        FormatData: function () {
                            if (this.data.Value && this.data.Value.length > 0) {
                                var arr = this.data.Value.split("~");
                                if (arr.length >= 1) {
                                    this.start = arr[0];
                                }
                                if (arr.length > 1) {
                                    this.end = arr[1];
                                }
                            }
                        },
                        RenderDate: function () {
                            var that = this;
                            laydate.render({
                                elem: '#' + this.data.Name
                                , type: this.format
                                //设置开始日期、日期日期的 input 选择器
                                //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                                , range: ['#' + this.data.Name + '-start', '#' + this.data.Name + '-end'],
                                done: function (v, d, e) {
                                    if (v) {
                                        var arr = v.split(" - ");
                                        that.start = arr[0];
                                        that.end = arr[1];
                                        that.$emit("update:value", arr[0] + "~" + arr[1])
                                    } else {
                                        that.start ="";
                                        that.end = "";
                                        that.$emit("update:value", "")
                                    }
                                    
                                    
                                }
                            });
                        }
                    },
                    template: `
					   <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						    <div class="lg-form-title">
							    <i v-if="data.Required">*</i>
							    <span class="cn">{{data.Title}}</span>
                                <span class="en">{{data.EnTitle}}</span>
							</div>
							<div class="lg-form-tips">{{data.Tips}}</div>
							<div class="lg-form-control">
								<div class="lg-form-inputs" :id="data.Name">
									<input type="text" readonly class="lg-input lg-input-text" :id="data.Name+'-start'" v-model="start">
									<span class="break">~</span>
									<input type="text" readonly class="lg-input lg-input-text" :id="data.Name+'-end'" v-model="end">
								</div>
							   <span class="fa fa-close" v-if="data.error"></span>
							</div>
						    <div class="lg-ver">
						    	  <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						    </div>
						</div>`
                }
            },//DateRange
            {
                "Key": "Phone",
                "Name": "lg-form-phone",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    template: `
					   <div :class="['lg-form-item','lg-form-fa-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						    <div class="lg-form-title">
							    <i v-if="data.Required">*</i>
							    <span class="cn">{{data.Title}}</span>
                                <span class="en">{{data.EnTitle}}</span>
							</div>
							<div class="lg-form-tips">{{data.Tips}}</div>
							<div class="lg-form-control">
                               <span class="fa fa-phone"></span>
							   <input type="text" class="lg-input lg-input-text" :value="value" @input="$emit('update:value', $event.target.value)">
							   <span class="fa fa-close" v-if="data.error"></span>
							</div>
						    <div class="lg-ver">
						  	  <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						    </div>
						</div>`
                }
            },//Phone
            {
                "Key": "Email",
                "Name": "lg-form-email",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    template: `
					   <div :class="['lg-form-item','lg-form-fa-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						    <div class="lg-form-title">
							    <i v-if="data.Required">*</i>
							    <span class="cn">{{data.Title}}</span>
                                <span class="en">{{data.EnTitle}}</span>
							</div>
							<div class="lg-form-tips">{{data.Tips}}</div>
							<div class="lg-form-control">
					            <span class="fa fa-envelope-o"></span>
								<input type="text" class="lg-input lg-input-text" :value="value" @input="$emit('update:value', $event.target.value)">
							    <span class="fa fa-close" v-if="data.error"></span>
							</div>
						    <div class="lg-ver">
						  	   <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						    </div>
					    </div>`
                }
            },//Email
            {
                "Key": "Radio",
                "Name": "lg-form-radio",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        valType: {
                            type: String,
                            default:"option"
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    methods: {
                        checked: function (item) {
                            if (this.valType == "option") {
                                if (this.value) {
                                    return this.value.opid == item.Id
                                } else {
                                    return false;
                                }
                            } else {
                                var value = item.Value || item.Text;
                                return this.value == value;
                            }
                           
                        },
                        onCheck: function (item) {
                            if (this.valType == "option") {
                                var process = [];
                                if (this.value) {//当前项已有选中值
                                    if (this.value.opid != item.Id) {//选中值未发生变化
                                        //恢复原选项的控制项为隐藏状态
                                        var options = this.data.Options.filter(p => p.Id == this.value.opid);
                                        if (options.length > 0) {
                                            var option = options[0];
                                            for (let i in option.ControlItems) {
                                                process.push({ name: option.ControlItems[i], state: false })
                                            }
                                        }
                                        //将当前选项的控制项设为显示状态
                                        this.$emit("update:value", { opid: item.Id, value: item.Value || item.Text });
                                        this.$emit("done", this.data);
                                        if (item.ControlItems.length > 0) {
                                            for (let i in item.ControlItems) {
                                                process.push({ name: item.ControlItems[i], state: true })
                                            }
                                        }
                                    }
                                } else {//当前项没有选中值
                                    //将当前选项的控制项设为显示状态
                                    this.$emit("update:value", { opid: item.Id, value: item.Value || item.Text });
                                    this.$emit("done", this.data);
                                    if (item.ControlItems.length > 0) {
                                        for (let i in item.ControlItems) {
                                            process.push({ name: item.ControlItems[i], state: true })
                                        }
                                    }
                                }

                                if (process.length > 0) {
                                    for (let i in process) {
                                        var name = process[i].name;
                                        var arr = this.items.filter(p => p.Data.Name == name)
                                        if (arr.length > 0) {
                                            arr[0].Data.IsRender = process[i].state;
                                        }
                                    }
                                }
                            } else {
                                if (item.Value != this.value) {
                                    var vdata = item.Value;
                                    if (vdata == undefined) {
                                        vdata = item.Text
                                    }
                                    this.$emit("update:value", vdata);
                                    this.$emit("done", this.data);
                                }

                            }
                        }
                    },
                    template: `
					   <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						    <div class="lg-form-title">
							    <i v-if="data.Required">*</i>
							    <span class="cn">{{data.Title}}</span>
                                <span class="en">{{data.EnTitle}}</span>
							</div>
							<div class="lg-form-tips">{{data.Tips}}</div>
							<div :class="['lg-form-group','lg-form-control',{'lg-form-block':data.Display=='block'}]">
								<div class="lg-form-radio" v-for="item in data.Options" :class="{'lg-form-checked':checked(item)}" v-on:click="onCheck(item)">
									<i class="fa"></i>
									<span>{{item.Text}}</span>
								</div>
								<span class="fa fa-close" v-if="data.error"></span>
							</div>
						    <div class="lg-ver">
						  	  <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						    </div>
						</div>`
                }
            },//Radio
            {
                "Key": "Checkbox",
                "Name": "lg-form-checkbox",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: []
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        valType: {
                            type: String,
                            default: "option"
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    mounted: function () {
                        if (typeof this.value != "object") {
                            this.value = [];
                        }  
                    },
                    methods: {
                        Checked: function (item) {
                            if (this.value.length > 0) {
                                if (this.valType == "option") {
                                    return this.value.filter(opt => opt.opid == item.Id).length > 0
                                } else {
                                    return this.value.filter(val => val == item.Value || val == item.Text).length > 0
                                }
                            } else {
                                return false;
                            }
                            
                        },
                        OnCheck: function (item) {
                            var value = this.value;
                            if (this.valType == "option") {
                                var arry = value.filter(v => v.opid != item.Id);
                                if (arry.length == value.length) {
                                    value.push({ "opid": item.Id, "value": item.Text });
                                } else {
                                    value = arry;
                                }
                            } else {
                                var checkVal = item.Value || item.Text;
                                var arry = value.filter(v => v != checkVal);
                                if (arry.length == value.length) {
                                    value.push(checkVal);
                                } else {
                                    value = arry;
                                }
                            }
                            this.$emit("update:value", value);
                            this.$emit("done", this.data);
                        }
                    },
                    template: `
					   <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						    <div class="lg-form-title">
							   <i v-if="data.Required">*</i>
							   <span class="cn">{{data.Title}}</span>
                               <span class="en">{{data.EnTitle}}</span>
							</div>
							<div class="lg-form-tips">{{data.Tips}}</div>
							<div :class="['lg-form-group','lg-form-control',{'lg-form-block':data.Display=='block'}]">
								<div class="lg-form-checkbox" v-for="item in data.Options" :class="{'lg-form-checked':Checked(item)}" v-on:click="OnCheck(item)">
									<i class="fa fa-check"></i>
									<span>{{item.Text}}</span>
								</div>
						        <span class="fa fa-close" v-if="data.error"></span>
							</div>
						    <div class="lg-ver">
						  	  <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						    </div>
						</div>`
                }
            },//Checkbox
            {
                "Key": "CheckBlock",
                "Name": "lg-form-checkblock",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        valType: {
                            type: String,
                            default: "option"
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    methods: {
                        onChecked: function (item) {
                            if (this.valType == "option") {
                                var process = [];
                                if (this.value) {//当前项已有选中值
                                    if (this.value.opid != item.Id) {//选中值未发生变化
                                        //恢复原选项的控制项为隐藏状态
                                        var options = this.data.Options.filter(p => p.Id == this.value.opid);
                                        if (options.length > 0) {
                                            var option = options[0];
                                            for (let i in option.ControlItems) {
                                                process.push({ name: option.ControlItems[i], state: false })
                                            }
                                        }
                                        //将当前选项的控制项设为显示状态
                                        this.$emit("update:value", { opid: item.Id, value: item.Value || item.Text });
                                        if (item.ControlItems.length > 0) {
                                            for (let i in item.ControlItems) {
                                                process.push({ name: item.ControlItems[i], state: true })
                                            }
                                        }
                                    }
                                } else {//当前项没有选中值
                                    //将当前选项的控制项设为显示状态
                                    this.$emit("update:value", { opid: item.Id, value: item.Value || item.Text });
                                    if (item.ControlItems.length > 0) {
                                        for (let i in item.ControlItems) {
                                            process.push({ name: item.ControlItems[i], state: true })
                                        }
                                    }
                                }
                                if (process.length > 0) {
                                    for (let i in process) {
                                        var name = process[i].name;
                                        var arr = this.items.filter(p => p.Data.Name == name)
                                        if (arr.length > 0) {
                                            arr[0].Data.IsRender = process[i].state;
                                        }
                                    }
                                }
                            } else {
                                this.$emit("update:value", item.Value || item.Text)
                            }
                        },
                        isChecked: function (item) {
                            var value = item.Value || item.Text;
                            return this.value == value;
                        }
                    },
                    template: `
					 <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						<div class="lg-form-title">
                            <i v-if="data.Required">*</i>
							<span class="cn">{{data.Title}}</span>
                            <span class="en">{{data.EnTitle}}</span>
                        </div>
						<div class="lg-form-tips">{{data.Tips}}</div>
						<div class="lg-form-control">
                            <ul class="lg-form-ul">
                               <li :class="{'checked':isChecked(item)}" v-for="item in data.Options" v-on:click="onChecked(item)">{{item.Text}}</li>
                            </ul>
						</div>
						<div class="lg-ver">
						    <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						</div>
					</div>
                    `
                }
            },//CheckBlock
            {
                "Key": "Select",
                "Name": "lg-form-select",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        valType: {
                            type: String,
                            default: "option"
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    computed: {
                        text: function () {
                            if (this.value != undefined && this.value != null && this.value != null) {
                                if (this.valType == "option") {
                                    return this.value.value;
                                } else {
                                    var arr = this.data.Options.filter(p => p.Value == this.value || p.Text == this.value);
                                    if (arr.length > 0) {
                                        return arr[0].Text;
                                    }
                                }
                            }
                            return ""
                        }
                    },
                    methods: {
                        OnSelected: function (item) {
                            if (this.valType == "option") {
                                var process = [];
                                if (this.value) {//当前项已有选中值
                                    if (this.value.opid != item.Id) {//选中值未发生变化
                                        //恢复原选项的控制项为隐藏状态
                                        var options = this.data.Options.filter(p => p.Id == this.value.opid);
                                        if (options.length > 0) {
                                            var option = options[0];
                                            for (let i in option.ControlItems) {
                                                process.push({ name: option.ControlItems[i], state: false })
                                            }
                                        }
                                        //将当前选项的控制项设为显示状态
                                        this.$emit("update:value", { opid: item.Id, value: item.Value || item.Text });
                                        this.$emit("done", this.data);
                                        if (item.ControlItems.length > 0) {
                                            for (let i in item.ControlItems) {
                                                process.push({ name: item.ControlItems[i], state: true })
                                            }
                                        }
                                    }
                                } else {//当前项没有选中值
                                    //将当前选项的控制项设为显示状态
                                    this.$emit("update:value", { opid: item.Id, value: item.Value || item.Text });
                                    this.$emit("done", this.data);
                                    if (item.ControlItems.length > 0) {
                                        for (let i in item.ControlItems) {
                                            process.push({ name: item.ControlItems[i], state: true })
                                        }
                                    }
                                }

                                if (process.length > 0) {
                                    for (let i in process) {
                                        var name = process[i].name;
                                        var arr = this.items.filter(p => p.Data.Name == name)
                                        if (arr.length > 0) {
                                            arr[0].Data.IsRender = process[i].state;
                                        }
                                    }
                                }
                            } else {
                                if (item.Value != this.value) {
                                    var vdata = item.Value;
                                    if (vdata == undefined) {
                                        vdata = item.Text
                                    }
                                    this.$emit("update:value", vdata);
                                    this.$emit("done", this.data);
                                }
                                
                            }
                        },
                        isSelected: function (item) {
                            if (this.valType == "option") {
                                if (this.value) {
                                    return this.value.opid == item.Id
                                } else {
                                    return false;
                                }
                            } else {
                                var value = item.Value || item.Text;
                                return this.value == value;
                            }
                        }
                    },
                    template: `
					 <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						<div class="lg-form-title">
                            <i v-if="data.Required">*</i>
							<span class="cn">{{data.Title}}</span>
                            <span class="en">{{data.EnTitle}}</span>
                        </div>
						<div class="lg-form-tips">{{data.Tips}}</div>
						<div class="lg-form-control">
                            <div class="lg-form-select">
							    <div class="lg-select">
								    <input type="text" readonly="readonly" class="lg-input lg-input-text" :value="text"/>
								    <label class="fa fa-caret-down" for="select"></label>
							    </div>
                                <div class="lg-select-position">
							        <ul class="select">
								        <li :class="['option',{'selected':isSelected(item)}]" v-for="item in data.Options" v-on:click="OnSelected(item)">{{item.Text}}</li>
							        </ul>
                                </div>
                            </div>
							<span class="fa fa-close" v-if="data.error"></span>
						</div>
						<div class="lg-ver">
						    <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						</div>
					</div>
                    `
                }
            },//Select
            {
                "Key": "MultipleSelect",
                "Name": "lg-form-multipleselect",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: []
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        valType: {
                            type: String,
                            default: "option"
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    computed: {
                        values: function () {
                            if (this.value.length > 0) {
                                if (this.valType == "option") {
                                    var arr = [];
                                    for (let i in this.value) {
                                        arr.push(this.value[i].value)
                                    }
                                    return arr;
                                }
                            }
                            return this.value;
                        }
                    },
                    methods: {
                        onSelected: function (item) {
                            var value = this.value;
                            var arr = [];
                            if (this.valType == "option") {
                                if (typeof value == "object") {
                                    arr = value.filter(p => p.opid != item.Id);
                                    if (arr.length == value.length) {
                                        arr.push({ "opid": item.Id, "value": item.Text })
                                    }
                                } else {
                                    arr.push({ "opid": item.Id, "value": item.Text })
                                }
                                
                            } else {
                                var target = item.Value || item.Text;
                                arr = value.filter(p => p != target);
                                if (arr.length == value.length) {
                                    arr.push(item.Value || item.Text)
                                }
                            }
                            this.$emit("update:value", arr)
                        },
                        isSelected: function (item) {
                            if (this.valType == 'option') {
                                if (typeof this.value == "object") {
                                    return this.value.filter(p => p.opid == item.Id).length > 0
                                } else {
                                    return false;
                                }
                                
                            } else {
                                return this.value.filter(p => p == item.Value || p == item.Text).length > 0
                            }
                        }
                    },
                    template: `
					 <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						<div class="lg-form-title">
                             <i v-if="data.Required">*</i>
							 <span class="cn">{{data.Title}}</span>
                             <span class="en">{{data.EnTitle}}</span></div>
						<div class="lg-form-tips">{{data.Tips}}</div>
						<div class="lg-form-control">
                            <div class="lg-form-select">
                                <div class="lg-select">
                                    <div class="lg-like-input lg-input lg-input-text">
                                        <span v-for="item in values">{{item}}</span>
                                    </div>
                                    <label class="fa fa-caret-down" for="select"></label>
                                </div>
                                <div class="lg-select-position item-select">
                                    <ul class="select">
                                        <li v-for="item in data.Options" v-on:click="onSelected(item)" :class="{'act':isSelected(item)}">
                                            <span>{{item.Text}}</span><i class="fa fa-check"></i>
                                        </li>
                                    </ul>
                                </div>
							    
                            </div>
							<span class="fa fa-close" v-if="data.error"></span>
						</div>
						<div class="lg-ver">
						    <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						</div>
					</div>
                    `
                }
            },//MultipleSelect
            {
                "Key": "Switch",
                "Name": "lg-form-switch",
                "Data": {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    methods: {
                        OnSelected: function (value, event) {
                            this.$emit("update:value", value);
                            var position = event.path.filter(p => p.className == "lg-select-position")[0]
                            $(position).css({ "display": "none" });
                            return false;
                        }
                    },
                    template: `
					 <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						<div class="lg-form-title">
							 <i v-if="data.Required">*</i>
							 <span class="cn">{{data.Title}}</span>
                             <span class="en">{{data.EnTitle}}</span>
						</div>
						<div class="lg-form-tips">{{data.Tips}}</div>
						<div class="lg-form-control">
                            <div class="lg-form-select">
							    <div class="lg-select">
								    <input type="text" readonly="readonly" class="lg-input lg-input-text" :value="value"/>
								    <label class="fa fa-caret-down" for="select"></label>
							    </div>
                                <div class="lg-select-position">
							        <ul class="select">
								        <li :class="['option',{'selected':item.Text==value}]" v-for="item in data.Options" v-on:click="OnSelected(item.Text,$event)">{{item.Text}}</li>
							        </ul>
                                </div>
                            </div>
                            <textarea :rows="data.OtherRows" class="lg-textarea lg-relation-text" v-if='value==data.Options[0].Text'></textarea>
							<span class="fa fa-close" v-if="data.error"></span>
						</div>
						<div class="lg-ver">
						    <p class="lg-ver-text" v-if="data.error"><span class="fa fa-close"></span>{{errMsg}}</p>
						</div>
					</div>
                    `
                }
            },//Switch
            {
                Key: "Accept",
                Name: "lg-form-accept",
                Data: {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Boolean],
                            default: false
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    methods: {
                        onCheck: function () {
                            this.$emit("update:value", !this.value)
                        }
                    },
                    template: `
					       <div class="lg-form-item">
						      <div class="lg-form-control">
						           <div :class="['lg-form-checkbox',{'lg-form-checked':value},{'pointer-none':renderType==1}]" v-on:click="onCheck">
                                      <i class="fa fa-check"></i>
                                      <span>{{data.Title}}</span>
                                   </div>
						      </div>
					       </div>`
                }
            },//Accept
            {
                Key: "Files",
                Name: "lg-form-files",
                Data: {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            type: [String, Object],
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        requestParam: {
                            type: Object,
                            default: null
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default:0
                        }
                    },
                    data() {
                        return {
                            files: [],
                            icons: [
                                { icon: "fa fa-file-excel-o", exts: "xls,xlsx" },
                                { icon: "fa fa-file-word-o", exts: "doc,docx" },
                                { icon: "fa fa-file-archive-o", exts: "rar,zip" },
                                { icon: "fa fa-file-text-o", exts: "txt" },
                                { icon: "fa fa-file-image-o", exts: "jpg,jpeg,png,gif" },
                                { icon: "fa fa-file-audio-o", exts: "mp3" },
                                { icon: "fa fa-file-video-o", exts: "mp4" },
                                { icon: "fa fa-file-pdf-o", exts: "pdf" },
                            ]
                        }
                    },
                    mounted: function () {
                        if (this.value && this.value.length > 0) {
                            var arr = lg.obj.copy(this.value);
                            for (let i in arr) {
                                this.files.push({
                                    file: null,
                                    size: 0,
                                    name: arr[i].split("/").pop(),
                                    extend: arr[i].split('.').pop(),
                                    url: arr[i],
                                    data: "",
                                    state: "success",
                                    isSave: true,
                                    progress: "100%",
                                    errMsg: ""
                                })
                            }

                        }
                    },
                    methods: {
                        getIcon: function (ext) {
                            var arr = this.icons.filter(p => p.exts.indexOf(ext)>-1);
                            if (arr.length > 0) {
                                return arr[0].icon
                            } else {
                                return "";
                            }
                        },
                        onSelect: function () {
                            if (this.renderType == 1) {
                                this.$emit("event", {"type": "file", "name": this.data.Name, "eventName": "load"});
                            } else {
                                this.$refs.fileSelector.click();
                            }
                            
                        },
                        onSelected: function () {
                            var that = this;
                            var files = this.$refs.fileSelector.files;
                            //校验文件数，未选择文件则不执行任何事件
                            if (files.length == 0) {
                                return false;
                            }
                            //校验选择的文件数量是否超出限制
                            if (files.length + this.files.length > this.data.FileCount) {
                                layer.msg("文件数量超出限制，最大允许文件数为：" + this.data.FileCount + ";如果有失败的文件请删除！", { icon: 2 });
                                return false;
                            }
                            //校验文件尺寸和格式

                            //先将选中的文件添加至待上传的文件列表中
                            for (var i = 0; i < files.length; i++) {
                                var file = files[i];
                                var _file = {
                                    file: file,
                                    size: (file.size / 1024 / 1024).toFixed(2),
                                    name: file.name,
                                    extend: file.name.split('.').pop(),
                                    url: "",
                                    data: "",
                                    state: "wait",
                                    isSave: false,
                                    progress: "1%",
                                    errMsg: ""
                                }
                                if (_file.size > parseFloat(this.data.MaxSize)) {
                                    _file.state = "fail";
                                    _file.progress = "100%";
                                    _file.errMsg = "文件尺寸超限！最大允许上传" + this.data.MaxSize + "M!"
                                }
                                if (this.data.FileTypes.filter(p => p == _file.extend).length == 0) {
                                    _file.state = "fail";
                                    _file.progress = "100%";
                                    _file.errMsg = "文件类型不支持！允许的类型：" + JSON.stringify(this.data.FileTypes)
                                }
                                this.files.push(_file)
                            }
                            if (window.FileReader) {
                                for (let i in this.files) {
                                    var file = this.files[i];
                                    if (file.state == "wait") {
                                        this.upFile(file);
                                    }

                                }
                            } else {
                                layer.msg("您的浏览器不支持上传插件！", { icon: 2 })
                            }
                            this.$refs.fileSelector.value = '';
                        },
                        upFile: function (file) {
                            var fd = new FormData();
                            fd.append("file", file.file);
                            fd.append("name", this.data.Name);
                            if (this.requestParam != null) {
                                for (let key in this.requestParam) {
                                    fd.append(key, this.requestParam[key]);
                                }
                            }
                            lg.postFile({
                                url: this.data.Api,
                                data: fd,
                                success: res => {
                                    if (res.code == 0) {
                                        file.state = "success";
                                        file.progress = "100%";
                                        file.url = res.data;
                                        this.setValue();
                                    } else {
                                        file.state = "fail";
                                        file.progress = "100%";
                                        file.errMsg = res.msg;
                                    }
                                },
                                fail: res => {
                                    file.state = "fail";
                                    file.progress = "100%";
                                    file.errMsg = "接口请求异常！";
                                }
                            })
                        },
                        remove: function (i) {
                            var that = this;
                            layer.confirm("确定要移除当前文件吗？", function (box) {
                                layer.close(box);
                                that.files.splice(i, 1);
                            })
                        },
                        setValue: function () {
                            var arr = this.files.filter(p => p.state == 'success');
                            var value = [];
                            if (arr.length > 0) {
                                for (let i in arr) {
                                    value.push(arr[i].url)
                                }
                                this.$emit("update:value", value);
                            }
                        },
                        open: function (file) {
                            console.log(file);
                            window.open(file.url, "_blank");
                        }
                    },
                    template: `
                            <div :class="['lg-form-item',{'lg-ver-error':data.error}]" :style="{'width':data.Width}">
                                <div class="lg-form-title">
                                   <i v-if="data.Required">*</i>
							       <span class="cn">{{data.Title}}</span>
                                   <span class="en">{{data.EnTitle}}</span>
                                </div>
                                <div class="lg-form-tips">{{data.Tips}}</div>
                                <input type="file" id="fileUp" class="hide" multiple ref='fileSelector' v-on:change="onSelected"/>
                                <div class="fileUpBox" v-on:click="onSelect">
                                    <span class="fa fa-cloud-upload btn-file" v-if="renderType==0">上传</span>
                                    <span class="fa fa-download btn-file" v-if="renderType==1">下载</span>
                                </div>
                                <div :class="['fileUp-item','file-'+item.state]" v-for="(item,index) in files">
                                   <div class="fileUp-item-control">
	                                    <span :class="['file-icon',getIcon(item.extend)]"></span>
	                                    <span class="file-name">{{item.name}}</span>
	                                    <div class="file-tools">
		                                    <span class="file-del fa fa-trash-o" title='移除文件' v-on:click='remove(index)' v-if="renderType==0" ></span>
                                            <span class="file-del fa fa-eye" title='查看文件' v-on:click='open(item)' v-if="renderType==1" ></span>
	                                    </div>
	                                    <span :class="['file-state','fa',{'fa-check':item.state=='success'},{'fa-close':item.state=='fail'},{'fa-spinner fa-pulse':item.state=='process'}]"></span><!--上传成功-->
	                                    <div class="file-progress">
		                                    <div class="file-progress-bar" :style="{'width':item.progress}"></div>
	                                    </div>
                                    </div>
                                    <div class="file-tips">{{item.errMsg}}</div>
                                </div>
                                <div class="lg-ver">
						  	      <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						      </div>
                            </div>
                     `
                }
            },//Files
            {
                Key: "Group",
                Name: "lg-form-group",
                Data: {
                    props: {
                        data: {
                            type: [String, Object],
                            default: {}
                        },
                        items: {
                            type: Object
                        }
                    },
                    template: `
                        <div class="lg-form-item lg-section">
							<div class="lg-section-title">
								<span class="cn">{{data.Title}}</span><span class="en" v-if="data.EnTitle">{{data.EnTitle}}</span>
							</div>
							<div class="lg-section-tips">{{data.Tips}}</div>
						</div>`
                }
            },//Group
            {
                Key: "Info",
                Name: "lg-form-info",
                Data: {
                    props: {
                        data: {
                            type: Object,
                            default: {}
                        }
                    },
                    template: `
                        <div class="lg-form-item">
							<div class="lg-form-text lg-form-tips">{{data.Tips}}</div>
						</div>`
                }
            },//Info
            {
                Key: "SmsCode",
                Name: "lg-form-smscode",
                Data: {
                    props: {
                        items: {
                            type: Array,
                            default: []
                        },
                        value: {
                            default: ""
                        },
                        data: {
                            type: Object,
                            default: {}
                        },
                        requestParam: {
                            type: Object,
                            default: null
                        },
                        //0填写 1查看
                        renderType: {
                            type: Number,
                            default: 0
                        }
                    },
                    data() {
                        return {
                            btText: "获取验证码",
                            disable: false
                        }
                    },
                    methods: {
                        getSmsCode: function () {
                            try {
                                if (this.disable) {
                                    return false;
                                }
                                if (this.data.Receiver) {
                                    var arr = this.items.filter(p => p.Data.Name == this.data.Receiver);
                                    if (arr.length > 0) {
                                        var type = arr[0].Data;
                                        var res = type.verify();
                                        if (res.state) {
                                            type.error = false;
                                            type.errMsg = '';
                                            this.disable = true;
                                            var that = this;
                                            var i = 60;
                                            var sendData = { phone: type.Value };
                                            //如果指定参数则使用指定参数，并将手机号码添加至对像
                                            if (this.requestParam != null) {
                                                sendData = this.requestParam;
                                                sendData.phone = type.Value
                                            }
                                            lg.request({
                                                url: "/api/user/apply/GetSmsCode",
                                                method: "post",
                                                data: sendData,
                                                success: res => {
                                                    if (res.code == 0) {
                                                        layer.msg("短信已发送！", { icon: 1 });
                                                        var timer = setInterval(function () {
                                                            if (i > 0) {
                                                                i--;
                                                                that.btText = "获取验证码(" + i + ")"
                                                            } else {
                                                                that.disable = false;
                                                                that.btText = "获取验证码";
                                                                clearInterval(timer);
                                                            }
                                                        }, 1000)
                                                    } else {
                                                        layer.msg(res.msg, { icon: 2 });
                                                        that.disable = false;
                                                    }
                                                },
                                                fail: res => {
                                                    layer.msg("发送失败！", { icon: 2 });
                                                    that.disable = false;
                                                }
                                            })
                                        }
                                        else {
                                            layer.msg(res.msg, { icon: 2 })
                                            type.error = true;
                                            type.errMsg = res.msg;

                                        }
                                    }
                                    else {
                                        layer.msg("指定的手机号字段不存在！", { icon: 2 })
                                    }
                                }
                                else {
                                    layer.msg("未指定接收验证码的手机号！", { icon: 2 })
                                }
                            } catch (e) {
                                layer.msg("执行异常，错误码：101！", {icon:2})
                            }
                             
                        }
                    },
                    template: `
                       <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
	                     <div class="lg-form-title">
                             <i v-if="data.Required">*</i>
							 <span class="cn">{{data.Title}}</span>
                             <span class="en">{{data.EnTitle}}</span>
                         </div>
                         <div class="lg-form-tips">{{data.Tips}}</div>
	                     <div class="lg-form-control">
		                    <div class="lg-form-inline">
			                    <input class="lg-input lg-input-text" :value="value" @input="$emit('update:value', $event.target.value)">
			                    <span :class="['code-btn btn',{'disable':disable}]" v-on:click="getSmsCode">{{btText}}</span>
		                    </div>
	                     </div>
	                     <div class="lg-ver">
						  	 <p class="lg-ver-text" v-if="data.error">{{data.errMsg}}</p>
						 </div>
                    </div>
                     `
                }
            },//SmsCode
            {
                "Name": "lg-form",
                "Data": {
                    props: {
                        data: {
                            type: Object
                        },
                        skin: {
                            type: String
                        },
                        btText: {
                            type: String,
                            default:"立即提交"
                        },
                        //0默认填写 1只读
                        renderType: {
                            type: Number,
                            default: 0
                        },
                        requestParam: {
                            type: Object,
                            default: null
                        }
                    },
                    data() {
                        return {
                            items: []
                        }
                    },
                    mounted: function () {
                        var items = this.data;
                        for (let i in items) {
                            items[i].Data.error = false;
                            items[i].Data.errMsg = ""
                        }
                        this.items = items;
                    },
                    template: `
                        <div :class="['diy-mode lg-form-default']">
                            <div class="Component">
                                <template v-for="item in data">
                                    <component
                                           :is="GetComponent(item.TypeName)"
                                           :items="data"
                                           :data="item.Data"
                                           :request-param="requestParam"
                                           v-model:value="item.Data.Value"
                                           v-show="item.Data.IsRender"
                                           v-on:done="done"
                                           :renderType="renderType"
                                       ></component>                             
                                </template>
                            </div>
                            <div style="padding:15px;text-align:center" v-if="renderType==0">
                                <button class="layui-btn" v-on:click="submit()">{{btText||'立即提交'}}</button>
                            </div>
                        </div>
                      `,
                    methods: {
                        GetComponent: function (key) {
                            return diyForm.getFormComponentName(key);
                        },
                        submit: function () {
                            diyForm.process(this.data);
                            this.$emit("submit"); 
                        },
                        done: function (data) {
                           this.$emit("done", data);
                        }
                    }

                }

            }
        ],
        settings: [
            {
                "Name": "lg-form-setting",
                "Data": {
                    props: ["data", "base", "typeName","items"],
                    data() {
                        return {
                            limitWords: false,
                            minWords: "",
                            maxWords: "",
                            options: {
                                files: [
                                    { Text: 'jpg', Value: '' },
                                    { Text: 'jpeg', Value: '' },
                                    { Text: 'png', Value: '' },
                                    { Text: 'gif', Value: '' },
                                    { Text: 'doc', Value: '' },
                                    { Text: 'docx', Value: '' },
                                    { Text: 'xls', Value: '' },
                                    { Text: 'xlsx', Value: '' },
                                    { Text: 'ppt', Value: '' },
                                    { Text: 'pdf', Value: '' },
                                    { Text: 'txt', Value: '' },
                                    { Text: 'zip', Value: '' },
                                    { Text: 'rar', Value: '' },
                                    { Text: 'mp4', Value: '' },
                                    { Text: 'mp3', Value: '' },
                                    { Text: 'flv', Value: '' },
                                ],
                                width: [
                                    { Text: '25', Value: '25%' },
                                    { Text: '50', Value: '50%' },
                                    { Text: '75', Value: '75%' },
                                    { Text: '100', Value: '100%'},
                                ]
                            }
                        }
                    },
                    computed: {
                        getReveiver: function () {
                            var options = []
                            var arr = this.items.filter(p => p.TypeName == "Phone");
                            if (arr.length > 0) {
                                for (let i in arr) {
                                    options.push({ Text: arr[i].Data.Title, Value: arr[i].Data.Name })
                                }
                            }
                            return options;
                        }
                    },
                    methods: {
                        AddOption: function () {
                            this.data.Options.push({
                                "Text": "选项",
                                "Value": "选项",
                                "ControlItems": [],
                                "Icon": "",
                                "NeedOtherValue": false
                            })
                        },
                        onWordsLimitCheck: function () {
                            this.limitWords = !this.limitWords;
                            if (this.limitWords) {
                                this.minWords = 0;
                                this.maxWords = 0;
                            } else {
                                this.data.TextLength = ""
                            }
                        },
                        SetLimit: function () {
                            var min = 0;
                            var max = 0;
                            if (this.minWords) {
                                min = this.minWords;
                            }
                            if (this.maxWords) {
                                max = this.maxWords;
                            }
                            this.data.TextLength = min + "~" + max;
                        },
                        setControl: function (obj) {
                            console.log("获取事件",obj)
                            var arr = this.items.filter(p => p.Data.Name == obj.name);
                            if (arr.length > 0) {
                                arr[0].Data.IsRender = obj.state;
                            }
                        }
                    },
                    template: `
                    <div v-if="data">
					    <div class="menu"><i class="fa fa-font"></i>{{data.Title}}</div>
					    <div class="field-nature">
						    <lg-form-singletext v-if="data.Title!=undefined" :data="{Title:'标题'}" v-model:value="data.Title"></lg-form-singletext>
                            <lg-form-singletext v-if="data.EnTitle!=undefined" :data="{Title:'英文标题'}" v-model:value="data.EnTitle"></lg-form-singletext>
                            <lg-form-singletext v-if="data.Name!=undefined&&base" :data="{Title:'字段名',Tips:'修改此项会影响已报名的数据，请慎重改动！'}" v-model:value="data.Name"></lg-form-singletext>
                            <lg-form-singletext v-if="data.Value!=undefined" :data="{Title:'默认内容'}" v-model:value="data.Value"></lg-form-singletext>
                            <lg-form-textarea v-if="data.Tips!=undefined" :data="{Title:'描述'}" v-model:value="data.Tips"></lg-form-textarea>
                            <lg-form-singletext v-if="data.Group!=undefined" :data="{Title:'分组名称'}" v-model:value="data.Group"></lg-form-singletext>
                            <lg-form-numberrange :data="{Title:'字数限制(0为不限)'}" v-model:value="data.TextRange" v-if="data.TextRange!=undefined"></lg-form-numberrange>
                            <lg-form-accept v-if="data.Required!=undefined" :data="{Title:'这个是必填项'}" v-model:value="data.Required"></lg-form-accept>
                            <lg-form-link v-if="data.Api!=undefined" :data="{Title:'接口地址'}" v-model:value="data.Api"></lg-form-link>
                            <lg-setting-address v-model:level="data.Level" v-if="typeName=='Address'"></lg-setting-address>
                            <lg-setting-options :options="data.Options" v-model:display="data.Display" v-if="data.Options!=undefined" :items="items" v-on:set-control="setControl"></lg-setting-options>
                            <lg-setting-switch v-model:other-title="data.OtherTitle" v-model:other-tips="data.OtherTips" v-model:rows="data.OtherRows" v-if="typeName=='Switch'"></lg-setting-switch>
                            <lg-form-number v-model:value="data.FileCount" :data="{Title:'上传文件数量'}" v-if="typeName=='Files'"></lg-form-number>
                            <lg-form-number v-model:value="data.MaxSize" :data="{Title:'文件大小限制(MB)'}" v-if="typeName=='Files'"></lg-form-number>
                            <lg-form-multipleselect v-model:value="data.FileTypes" :data="{Title:'允许上传的文件类型',Options:options.files}" val-type="text" v-if="typeName=='Files'"></lg-form-multipleselect>
                            <lg-form-select v-model:value="data.Receiver" :data="{Title:'选择接收手机',Options:getReveiver}" val-type="text" v-if="typeName=='SmsCode'"></lg-form-select>
                            <lg-form-checkblock v-model:value="data.Width" v-if="data.Width!=undefined" val-type="text" :data="{Title:'表单宽度%',Options:options.width}"></lg-form-checkblock>
                            <lg-setting-base v-model:name="data.Name" v-model:exportname="data.ExportName" v-model:isexport="data.IsExport" v-model:isshow="data.IsShow" v-model:iswhere="data.IsWhere" v-model:wherekey="data.WhereKey" v-if="base"></lg-setting-base>
					    </div>
				    </div>`
                }
            },//lg-form-setting
            {
                "Name": "lg-setting-base",
                "Data": {
                    props: {
                        "name": {
                            type: String,
                            default:""
                        },
                        "exportname": {
                            type: String,
                            default: ""
                        },
                        "isexport": {
                            type: Boolean,
                            default: false
                        },
                        "isshow": {
                            type: Boolean,
                            default: false
                        },
                        'iswhere': {
                            type: Boolean,
                            default: false
                        },
                        "wherekey": {
                            type: String,
                            default: ""
                        }
                    },
                    methods: {
                        Switch: function (name) {
                            this.$emit("update:" + name, !this[name]);
                        },
                        onSelect: function (val, event) {
                            this.$emit("update:wherekey", val);
                        }
                    },
                    template: `
                           <div class="lg-form-item">
							    <div class="lg-form-title">字段Name</div>
							    <input class="lg-input lg-input-text" placeholder="" :value="name" @input="$emit('update:name', $event.target.value)">
						    </div>
                           <div class="lg-form-item">
							    <div class="lg-form-title">导出标题</div>
							    <input class="lg-input lg-input-text" placeholder="" :value="exportname" @input="$emit('update:exportname', $event.target.value)">
						    </div>
                            <div class="lg-form-item">
							    <div class="lg-form-checkbox" :class="{'lg-form-checked':isexport}">
								    <i class="fa fa-check" @click="Switch('isexport')"></i>
								    <span>默认导出</span>
							    </div>
						    </div>
                            <div class="lg-form-item">
							    <div class="lg-form-checkbox" :class="{'lg-form-checked':isshow}">
								    <i class="fa fa-check" @click="Switch('isshow')"></i>
								    <span>默认展示列</span>
							    </div>
						    </div>
                            <div class="lg-form-item">
							    <div class="lg-form-checkbox" :class="{'lg-form-checked':iswhere}">
								    <i class="fa fa-check" @click="Switch('iswhere')"></i>
								    <span>查询字段</span>
							    </div>
						    </div>
                            <div class="lg-form-item">
							    <div class="lg-form-title">查询方式</div>
							    <div class="lg-form-select">
								    <div class="lg-select">
									    <input type="text" readonly="readonly" class="lg-input lg-input-text" :value="wherekey" />
									    <label class="fa fa-caret-down" for="selectDress"></label>
								    </div>
                                    <div class="lg-select-position">
								        <ul class="select">
									        <li :class="['option',{'selected':wherekey=='精确匹配'}]" v-on:click="onSelect('精确匹配',$event)">精确匹配</li>
									        <li :class="['option',{'selected':wherekey=='模糊匹配'}]" v-on:click="onSelect('模糊匹配',$event)">模糊匹配</li>
								        </ul>
                                   </div>
							    </div>
						    </div>
`
                }
            }, //lg-setting-base
            {
                "Name": "lg-setting-address",
                "Data": {
                    props: {
                        "level": {
                            type: Number,
                            default: 4
                        }
                    },
                    computed: {
                        levelTitle: function () {
                            switch (this.level) {
                                case 4:
                                    return "省/地区、市、区/县、详细地址";
                                case 3:
                                    return "省/地区、市、区/县";
                                case 2:
                                    return "省/地区、市";
                                case 1:
                                    return "省/地区";
                            }
                        }
                    },
                    methods: {
                        Switch: function (name) {
                            this.$emit("update:required", !this[name]);
                        },
                        onSelect: function (val, event) {
                            this.$emit("update:level", val);
                        }
                    },
                    template: `
                        <!--地址精度-->
						<div class="lg-form-item">
							<div class="lg-form-title">地址精度</div>
							<div class="lg-form-select">
								<div class="lg-select">
									<input type="text" readonly="readonly" class="lg-input lg-input-text" :value="levelTitle" />
									<label class="fa fa-caret-down" for="selectDress"></label>
								</div>
                                <div class="lg-select-position" ref="levelPostion">
								    <ul class="select">
									    <li :class="['option',{'selected':level==4}]" v-on:click="onSelect(4,$event)">省/地区、市、区/县、详细地址</li>
									    <li :class="['option',{'selected':level==3}]" v-on:click="onSelect(3,$event)">省/地区、市、区/县</li>
									    <li :class="['option',{'selected':level==2}]" v-on:click="onSelect(2,$event)">省/地区、市</li>
									    <li :class="['option',{'selected':level==1}]" v-on:click="onSelect(1,$event)">省/地区</li>
								    </ul>
                               </div>
							</div>
						</div>`
                }
            }, //lg-setting-address
            {
                "Name": "lg-setting-options",
                "Data": {
                    props: ["options", "display", "items"],
                    emits:["setControl"],
                    data() {
                        return {
                            currOption: null
                        }
                    },
                    methods: {
                        controled: function (name) {
                            return this.currOption.ControlItems.filter(p => p == name).length > 0;
                        },
                        setControlItem: function (name) {
                            let controlItems = this.currOption.ControlItems;
                            var state = false;
                            var arr = controlItems.filter(p => p != name);
                            if (arr.length == controlItems.length) {
                                this.currOption.ControlItems.push(name);
                                this.items.filter(p => p.Data.Name == name)[0].Data.IsRender = false;
                            } else {
                                this.currOption.ControlItems = arr;
                                state = true;
                            }
                            this.$emit("setControl", { name: name, state: state })
                        },
                        add: function () {
                            this.options.push({
                                "Text": "选项",
                                "Value": "",
                                "Id": lg.GetSN(6,10),
                                "ControlItems": [],
                                "Icon": "",
                                "NeedOtherValue": false
                            })
                        },
                        remove: function (index) {
                            var that = this;
                            layer.confirm("确定移除选项？", function (box) {
                                layer.close(box);
                                that.options.splice(index, 1)
                            })
                            
                        }
                    },
                    template: `
                        <div class="lg-form-item">
							<div class="lg-form-title">选项内容</div>
							<div class="lg-form-input" tabindex="0" v-for="(item,index) in options">
								<input class="lg-input lg-input-text option" v-model="item.Text">
								<div class="item-tool">
									<i class="fa fa-trash-o" aria-hidden="true" v-on:click="remove(index)"></i>
                                    <i class="fa fa-bars" title="逻辑表单" v-on:click="currOption=item"></i>
								</div>
							</div>
							<button class="fa fa-plus-square btn addoption" v-on:click="add()">添加新选项</button>
						</div>
						<!--按钮排布-->
						<div class="layout" v-if="display!=undefined">
							<div class="lg-form-title">布局方式</div>
							<ul class="lg-form-ul">
								<li :class="{'checked':display=='inline'}" v-on:click="$emit('update:display', 'inline')">横向排布</li>
								<li :class="{'checked':display=='block'}" v-on:click="$emit('update:display', 'block')">竖向排布</li>
							</ul>
						</div>
                        <div class="lg-popup-shadow" v-if="this.currOption">
				            <div class="lg-popup-container">
					            <div class="lg-popup-title">
						            <span>设置逻辑表单规则</span>
						            <span class="fa fa-close" v-on:click="currOption=null"></span>
					            </div>
					            <div class="lg-popup-tips">
						            <i>*</i>选择选项后，才会显示所设置的字段
					            </div>
					            <div class="lg-popup-content">
						            <div class="lg-popup-sticky">
							            <div class="item-option">
								            选项内容：<span>{{this.currOption.Text}}</span>
							            </div>
						            </div>
						            <div class="item-select">
							            <ul>
								            <li :class="{'act':controled(item.Data.Name)}" v-for="item in items" :key="item.Data.Name" v-on:click="setControlItem(item.Data.Name)">
									            <span>{{item.Data.Title}}</span><i class="fa fa-check"></i>
								            </li>
							            </ul>
						            </div>
					            </div>
				            </div>
			        </div>`
                }
            }, //lg-setting-option
            {
                "Name": "lg-setting-switch",
                "Data": {
                    props: ["otherTitle","otherTips",'rows','textStart','textEnd'],
                    methods: {
                        SwitchRequired: function () {
                            this.$emit("update:required", !this.required);
                        },
                        SetWidth: function (w) {
                            this.$emit("update:width", w);
                        }
                    },
                    template: `
                        <div class="lg-form-item">
							<div class="lg-form-title">文本标题</div>
							<input maxlength="400" class="lg-input lg-input-text" placeholder="请输入标题" :value="otherTitle" @input="$emit('update:otherTitle', $event.target.value)">
						</div>                       
						<div class="lg-form-item">
							<div class="lg-form-title">文本提示</div>
							<input class="lg-input lg-input-text" placeholder="请输入提示" :value="otherTips" @input="$emit('update:otherTips', $event.target.value)">
						</div>
                        <div class="lg-form-item">
							<div class="lg-form-title">文本行高</div>
							<div class="lg-form-select">
								<div class="lg-select">
									<input type="text" readonly="readonly" class="lg-input lg-input-text" :value="rows" />
									<label class="fa fa-caret-down" for="selectDress"></label>
								</div>
                                <div class="lg-select-position">
								    <ul class="select">
									    <li :class="['option',{'selected':rows==1}]" v-on:click="$emit('update:rows',1)">1</li>
									    <li :class="['option',{'selected':rows==2}]" v-on:click="$emit('update:rows',2)">2</li>
									    <li :class="['option',{'selected':rows==3}]" v-on:click="$emit('update:rows',3)">3</li>
									    <li :class="['option',{'selected':rows==4}]" v-on:click="$emit('update:rows',4)">4</li>
                                        <li :class="['option',{'selected':rows==5}]" v-on:click="$emit('update:rows',5)">5</li>
								    </ul>
                               </div>
							</div>
						</div>
                        <div class="lg-form-item">
							<div class="lg-form-title">字符长度</div>
							<input class="lg-input lg-input-text" placeholder="请输入提示" :value="textRange" @input="$emit('update:textRange', $event.target.value)">
						</div>`
                }
            },//lg-setting-default
        ]
    },
    componentForms: function (app) {
        for (let i in this.components.forms) {
            var compt = this.components.forms[i];
            app.component(compt.Name, compt.Data)
        }
    },
    componentSettings: function (app) {
        for (let i in this.components.settings) {
            var compt = this.components.settings[i];
            app.component(compt.Name, compt.Data)
        }
    },
    getFormComponentName: function (key) {
        return this.components.forms.filter(p => p.Key == key)[0].Name
    },
    newType: function (typeName) {
        var type = this.types[typeName];
        if (type) {
            var obj = {
                "TypeName": typeName,
                "Data": new type()
            }
            return obj;
        } else {
            return null;
        }
    },
    format: {
        toString: function (items) {
            var _items = lg.obj.copy(items);
            for (let i in _items) {
                _items[i].Data = JSON.stringify(_items[i].Data)
            }
            return JSON.stringify(_items)
        },
        toJson: function (jsonStr) {
            var _items = lg.convert.toJson(jsonStr, []);
            if (_items.length > 0) {
                for (let i in _items) {
                    var type = diyForm.types[_items[i].TypeName]
                    _items[i].Data = new type(JSON.parse(_items[i].Data));
                }
            }
            return _items;
        }
    },
    process: function (items) {
        for (let i in items) {
            if (items[i].TypeName == 'IdNumber' && items[i].Data.Group != "") {
                var sib = items.filter(p => p.TypeName == "Select" && p.Data.Group == items[i].Data.Group);
                if (sib.length > 0) {
                    items[i].Data.IdType = sib[0].Data.Value.value || "身份证";
                }
            }
        }
        return items;
    },//证件号码与证件类型绑定，通过group来关联
    verify: function (typeName, data) {
        var type = this.types[typeName];
        if (type) {
            var obj = new type(data);
            if (obj.verify) {
                return obj.verify();
            } else {
                return { state: true, msg: "" }
            } 
        } else {
            return { state: false, msg: "找不到：[" + typeName + "]对像原型！" }
        }
    },
    getValue: function (items) {

    },
    setValue: function (items, data) {
        if (typeof items == "string") {
            items = this.format.toJson(items);
        }
        if (typeof data == "string") {
            data = JSON.parse(data);
        }
        for (let i in items) {
            var type = items[i].Data;
            if (type.setValue) {
                type.setValue(data);
            } else {
                type.Value = data[type.Name]
            }
            if (type.Value == "lg-no-render") {
                type.IsRender = false;
                type.Value = "";
            } else {
                type.IsRender = true;
            }
        }
        return items;
    }
}

diyForm.types.SingleText.prototype.verify = function () {
    var res = { state: true, msg: "ok" };
    if (this.Required) {
        res.state = lg.regx.required(this.Value);
        if (!res.state) {
            res.msg = "必填项不可为空!";
            return res;
        }
    }
    if (this.Value && this.TextLength) {
        var res = { state: true, msg: "ok" };
        if (this.TextLength.indexOf("~") > -1) {
            res.state = lg.regx.textRane(this.Value, this.TextLength.split("~"));
        } else {
            res.state = lg.regx.textRane(this.Value, this.TextLength);
        }
        if (!res.state) {
            res.msg = "字符长度不在允许的范围内！";
        }
    }
    return res
}
diyForm.types.Textarea.prototype.verify = function () {
    var res = { state: true, msg: "ok" };
    if (this.Required) {
        res.state = lg.regx.required(this.Value);
        if (!res.state) {
            res.msg = "必填项不可为空!";
            return res;
        }
    }
    if (this.Value && this.TextLength) {
        var res = { state: true, msg: "ok" };
        if (this.TextLength.indexOf("~") > -1) {
            res.state = lg.regx.textRane(this.Value, this.TextLength.split("~"));
        } else {
            res.state = lg.regx.textRane(this.Value, this.TextLength);
        }
        if (!res.state) {
            res.msg = "字符长度不在允许的范围内！";
        }
    }
    return res
}
diyForm.types.Phone.prototype.verify = function () {
    var required = lg.regx.required(this.Value);
    if (this.Required && !required) {
        return {state: false, msg: "必填项不可为空!" };
    }
    if (required && !lg.regx.phone(this.Value)) {
        return { state: false, msg: "不是有效的手机格式!" };
    }
    return { state: true, msg: "验证通过" };
}
diyForm.types.Email.prototype.verify = function () {
    var required = lg.regx.required(this.Value);
    if (this.Required && !required) {
        return { state: false, msg: "必填项不可为空!" };
    }
    if (required && !lg.regx.email(this.Value)) {
        return { state: false, msg: "不是有效的邮箱格式！" };
    }
    return { state: true, msg: "" };
}
diyForm.types.Number.prototype.verify = function () {
    var required = lg.regx.required(this.Value);
    if (this.Required && !required) {
        return { state: false, msg: "必填项不可为空!" };
    }
    if (required && !lg.regx.number(this.Value)) {
        return { state: false, msg: "不是合法的数字格式！" };
    }
    return { state: true, msg: "" };
}
diyForm.types.Link.prototype.verify = function () {
    var required = lg.regx.required(this.Value);
    if (this.Required && !required) {
        return { state: false, msg: "必填项不可为空!" };
    }
    if (required && !this.Value.test(/^(http||https|ftp){0,1}(:\/\/)(www\.)?([a-z0-9:?=&]+)/)) {
        return { state: false, msg: "不是有效的网址格式！" };
    }
    return { state: true, msg: "" };
}
diyForm.types.IdNumber.prototype.verify = function () {
    var required = lg.regx.required(this.Value);
    if (this.Required && !required) {
        return { state: false, msg: "必填项不可为空!" };
    }
    if (required && this.IdType.indexOf("身份证")>-1 && !lg.regx.idCard(this.Value)) {
        return { state: false, msg: "不是有效的身份证号码！" };
    }
    return { state: true, msg:""};
}
diyForm.types.IdNumber.prototype.getValue = function () {
    var obj = { type: this.IdType, value: this.Value }
    return obj;
}
diyForm.types.IdNumber.prototype.setValue = function (data) {
    var value = data[this.Name];
    if (value) {
        if (typeof value != "object") {
            value = lg.convert.toJson(value, null);
        }
        if (value != null) {
            this.Value = value.value;
            this.IdType = value.type;
        } else {
            this.Value = value
        }
        
    }  
}
diyForm.types.Select.prototype.verify = function () {
    var res = { state: true, msg: "ok" };
    if (this.Required && typeof this.Value != "object") {
        res.state = false;
        res.msg = "必填项不可为空!";
        return res;
    }
    return res
}
diyForm.types.Select.prototype.getValue = function () {
    return this.Value;
}
diyForm.types.Select.prototype.setValue = function (data) {
    var val = data[this.Name];
    if (typeof val == "object") {
        this.Value = val;
    } else {
        this.Value = lg.convert.toJson(val, "");
    }
    
}
diyForm.types.Date.prototype.verify = function () {
    var res = { state: true, msg: "ok" };
    if (this.Required) {
        res.state = lg.regx.required(this.Value);
        if (!res.state) {
            res.msg = "必填项不可为空!";
            return res;
        }
    }
    return res
}
diyForm.types.DateRange.prototype.verify = function () {
    var res = { state: true, msg: "ok" };
    if (this.Required) {
        res.state = lg.regx.required(this.Value);
        if (!res.state) {
            res.msg = "必填项不可为空!";
            return res;
        }
    }
    return res
}
diyForm.types.Radio.prototype.verify = function () {
    var res = { state: true, msg: "ok" };
    if (this.Required) {
        res.state = lg.regx.required(this.Value);
        if (!res.state) {
            res.msg = "必填项不可为空!";
            return res;
        }
    }
    return res
}
diyForm.types.Radio.prototype.getValue = function () {
    return this.Value;
}
diyForm.types.Radio.prototype.setValue = function (data) {
    var val = data[this.Name];
    if (typeof val == "object") {
        this.Value = val;
    } else {
        this.Value = lg.convert.toJson(val, "");
    }
}
diyForm.types.Checkbox.prototype.verify = function () {
    var res = { state: true, msg: "ok" };
    if (this.Required) {
        var value = lg.convert.toJson(this.Value, [])
        if (value.length == 0) {
            res.state = false;
            res.msg = "必填项不可为空!";
            return res;
        }
    }
    return res
}
diyForm.types.Checkbox.prototype.getValue = function () {
    if (typeof this.Value == 'object' && this.Value.length == 0) {
        return ""
    }
    return this.Value;
}
diyForm.types.Checkbox.prototype.setValue = function (data) {
    this.Value = lg.convert.toJson(data[this.Name], []);
}
diyForm.types.Address.prototype.verify = function () {
    var required = lg.regx.required(this.Value);
    if (this.Required && !required) {
        return { state: false, msg: "必填项不可为空!" };
    }
    if (required) {
        var arr = this.Value.split(" > ");
        if (arr.length != this.Level) {
            return { state: false, msg: "请填写完整！" };
        }
    }
    return { state: true, msg: "" };
}
diyForm.types.SmsCode.prototype.verify = function () {
    var res = { state: true, msg: "ok" };
    res.state = lg.regx.required(this.Value);
    if (!res.state) {
        res.msg = "验证码不可为空!";
        return res;
    }
    return res;
}
diyForm.types.SmsCode.prototype.setValue = function () {
    this.Value = "";
}
diyForm.types.Files.prototype.verify = function () {
    var res = { state: true, msg: "ok" };
    if (this.Required) {
       
        if (this.Value.length == 0) {
            res.state = false;
            res.msg = "文件未上传!";
            return res;
        }
    }
    return res
}
diyForm.types.Files.prototype.getValue = function () {
    if (typeof this.Value == 'object' && this.Value.length == 0) {
        return ""
    }
    return this.Value;
}
diyForm.types.Files.prototype.setValue = function (data) {
    var val = data[this.Name];
    if (typeof val == "object") {
        this.Value = val;
    } else {
        this.Value = lg.convert.toJson(val, "");
    }
}
diyForm.types.MultipleSelect.prototype.verify = function () {
    var res = { state: true, msg: "ok" };
    if (this.Required) {
        if (this.Value.length == 0) {
            res.state = false;
            res.msg = "必填项不可为空!";
            return res;
        }
    }
    return res
}
diyForm.types.MultipleSelect.prototype.getValue = function () {
    if (typeof this.Value == 'object' && this.Value.length == 0) {
        return ""
    }
    return this.Value;
}
diyForm.types.MultipleSelect.prototype.setValue = function (data) {
    var val = data[this.Name];
    if (typeof val == "object") {
        this.Value = val;
    } else {
        this.Value = lg.convert.toJson(val, "");
    }
}

